@extends('home.layout.base')
@section('scripts')
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    listData: [],
                    pageData: null,
                    hasData: true, //加载更多开关
                    noData: false, //没有数据开关
                    loading: false,//加载loading开关
                    params:{page : 2, title : "{{ $title }}"},
                    current: 'new',
                    columnListData: [],
                    columnPageData: null,
                    projectListData: [],
                    projectPageData: null,
                    historyKeyword: JSON.parse(localStorage.getItem('historyKeyword')) ? JSON.parse(localStorage.getItem('historyKeyword')) : [],
                }
            },
            created(){
                this.news();
                if(this.params.title){
                    if(!this.historyKeyword.includes(this.params.title)){
                        this.historyKeyword.unshift(this.params.title);
                        localStorage.setItem('historyKeyword',JSON.stringify(this.historyKeyword));
                    }
                }
            },
            methods: {
                news() {
                    let that = this;
                    this.hasData = false;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('home.new.index') }}",this.params,function(res){
                            that.pageData = res.data;
                            if(that.params.page == 1){
                                that.listData = res.data.data;
                            }else{
                                that.listData = that.listData.concat(res.data.data);
                            }
                            that.loading = false;
                            if(that.params.page == that.pageData.last_page){
                                that.noData = true;
                                that.hasData = false;
                            }else{
                                that.noData = false;
                                that.hasData = true;
                            }
                            that.params.page ++;
                        })
                    },300);
                },
                columns() {
                    let that = this;
                    this.hasData = false;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('home.column.index') }}",this.params,function(res){
                            that.columnPageData = res.data;
                            if(that.params.page == 1){
                                that.columnListData = res.data.data;
                            }else{
                                that.columnListData = that.columnListData.concat(res.data.data);
                            }
                            that.loading = false;
                            if(that.params.page == that.columnPageData.last_page){
                                that.noData = true;
                                that.hasData = false;
                            }else{
                                that.noData = false;
                                that.hasData = true;
                            }
                            that.params.page ++;
                        })
                    },300);
                },
                projects() {
                    let that = this;
                    this.hasData = false;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('home.project.index') }}",this.params,function(res){
                            that.projectPageData = res.data;
                            if(that.params.page == 1){
                                that.projectListData = res.data.data;
                            }else{
                                that.projectListData = that.projectListData.concat(res.data.data);
                            }
                            that.loading = false;
                            if(that.params.page == that.projectPageData.last_page){
                                that.noData = true;
                                that.hasData = false;
                            }else{
                                that.noData = false;
                                that.hasData = true;
                            }
                            that.params.page ++;
                        })
                    },300);
                },
                info(id) {
                    window.location.href = "{{ route('home.new.info') }}"+'?id='+id;
                },
                pinfo(id) {
                    window.location.href = "{{ route('home.project.info') }}"+'?id='+id;
                },
                cinfo(id) {
                    window.location.href = "{{ route('home.column.info') }}"+'?id='+id;
                },
                paginate(){
                    this.hasData = false;
                    switch(this.current){
                        case "new":
                            this.news();
                            break;
                        case 'column':
                            this.columns();
                            break;
                        case "project":
                            this.projects();
                            break;
                    }
                },
                tagSearch(k){
                    this.params.page = 1;
                    this.params.title = k;
                    switch(this.current){
                        case "new":
                            this.news();
                            break;
                        case 'column':
                            this.columns();
                            break;
                        case "project":
                            this.projects();
                            break;
                    }
                },
                clearStorage(){
                    localStorage.removeItem('historyKeyword');
                    this.historyKeyword = [];
                },
                search(){
                    this.hasData = false;
                    this.params.page = 1;
                    if(this.params.title){
                        if(!this.historyKeyword.includes(this.params.title)){
                            this.historyKeyword.unshift(this.params.title);
                            localStorage.setItem('historyKeyword',JSON.stringify(this.historyKeyword));
                        }
                    }
                    switch(this.current){
                        case "new":
                            this.news();
                            break;
                        case 'column':
                            this.columns();
                            break;
                        case "project":
                            this.projects();
                            break;
                    }
                },
            },
            filters:{
                ellipsis(value){
                    if(!value) return ''
                    if(value.length > 25){
                        return value.slice(0,25) + '...'
                    }
                    return value
                }
            }
        });
        $(function () {
            $('.search-menu ul li').click(function(){
                $(this).siblings().removeClass("active");
                $(this).addClass("active");
                var name = $(this).attr('name');
                app.current = name;
                app.params.page = 1;
                app.hasData = false;
                switch(name){
                    case "new":
                        app.news();
                        $('.search-info .search-column-item').hide();
                        $('.search-info .main-list-item').show();
                        $('.search-info .search-project-item').hide();
                        break;
                    case 'column':
                        app.columns();
                        $('.search-info .search-column-item').show();
                        $('.search-info .main-list-item').hide();
                        $('.search-info .search-project-item').hide();
                        break;
                    case "project":
                        app.projects();
                        $('.search-info .search-column-item').hide();
                        $('.search-info .main-list-item').hide();
                        $('.search-info .search-project-item').show();
                        break;
                }
            })
        })
    </script>
@endsection
@section('content')
    <div class="container main search-info" id="app" v-cloak>
        <div class="row">
            <div class="col-lg-8 main-left">
                <div class="col-lg-12" style="padding: 0">
                    <div class="search-input">
                        <input v-model="params.title" type="text" placeholder="搜索关键字">
                        <button @click="search()" class="search-btn"></button>
                    </div>
                </div>
                <div class="col-lg-12" style="padding-right: 0">
                    <div class="search-log">
                        <h4>搜索记录 <button @click="clearStorage()" class="log-close">清空</button></h4>
                        <ul>
                            <li v-for="word in historyKeyword" @click="tagSearch(word)">@{{ word }}</li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-12 search-menu">
                    <ul>
                        <li class="active" name="new"><span>新闻</span></li>
                        <li name="column"><span>专栏</span></li>
                        <li name="project"><span>项目</span></li>
                    </ul>
                </div>
                <div class="col-lg-12 main-list-item" style="margin-top: 5px">
                    <div v-for="items in listData" class="item-article" @click="info(items.id)">
                        <div class="item-article-img">
                            <span class="tag-name" v-if="items.cate_child">@{{ items.cate_child.name }}</span>
                            <span class="tag-name none" v-else></span>
                            <img :src="items.thumb" alt="">
                        </div>
                        <div class="item-article-info">
                            <p class="item-article-info-title">@{{ items.title }}</p>
                            <p class="item-article-info-note">@{{ items.summary }}</p>
                            <p class="item-article-info-other">
                                <img :src="items.user.avatar" alt="">
                                <span class="item-article-info-other-name">
                                        @{{ items.user.truename }} <em>.</em> @{{ moment(items.created_at).format('YYYY-MM-DD') }}<i></i>
                                    </span>
                                <span class="item-article-info-other-view"> <i class="fa fa-thumbs-o-up"></i> @{{ items.praise }}&nbsp;&nbsp;&nbsp;&nbsp; <i class="fa fa-eye"></i> @{{ items.view }}</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 search-column-item">
                    <div v-for="(items,index) in columnListData">
                        <div v-if="index%2 == 0" class="col-lg-6 column-item-one" @click="cinfo(items.id)">
                            <div class="main-column-item">
                                <div class="column-item-info">
                                    <div class="item-info-avatar">
                                        <img :src="items.avatar" alt="">
                                    </div>
                                    <div class="item-info-go">
                                        <p class="item-info-name"> @{{ items.truename }}</p>
                                        <table>
                                            <tr class="table-title">
                                                <td style="width: 80px">文章数</td>
                                                <td>浏览量</td>
                                            </tr>
                                            <tr class="table-number">
                                                <td>@{{ items.total_news }}</td>
                                                <td>@{{ items.total_views }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <div class="column-item-note">作者简介：@{{ items.introduce ? items.introduce : '这个家伙很懒，什么也没留下' }}</div>
                            </div>
                        </div>
                        <div v-else class="col-lg-6 column-item-two" @click="cinfo(items.id)">
                            <div class="main-column-item">
                                <div class="column-item-info">
                                    <div class="item-info-avatar">
                                        <img :src="items.avatar" alt="">
                                    </div>
                                    <div class="item-info-go">
                                        <p class="item-info-name"> @{{ items.truename }}</p>
                                        <table>
                                            <tr class="table-title">
                                                <td style="width: 80px">文章数</td>
                                                <td>浏览量</td>
                                            </tr>
                                            <tr class="table-number">
                                                <td>@{{ items.total_news }}</td>
                                                <td>@{{ items.total_views }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <div class="column-item-note">作者简介：@{{ items.introduce ? items.introduce : '这个家伙很懒，什么也没留下' }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 search-project-item">
                    <div v-for="(items,index) in projectListData">
                        <div class="col-lg-12" style="padding-right: 0" @click="pinfo(items.id)">
                            <div class="main-project-item">
                                <div class="project-item-info">
                                    <div class="item-info-avatar">
                                        <img :src="items.thumb" alt="">
                                    </div>
                                    <div class="item-info-go">
                                        <p class="item-info-name"> @{{ items.title | ellipsis }} <button>@{{ items.cate.name }}</button></p>
                                        <p class="item-info-tag tag1"><i class="fa fa-map-marker"></i> &nbsp;@{{ items.region }}</p>
                                        <p class="item-info-tag tag2"><i class="fa fa-tag"></i> &nbsp;@{{ items.explain }}</p>
                                        <p class="item-info-tag tag3"><i class="fa fa-clock-o"></i> &nbsp;@{{ moment(items.online).format('YYYY年MM月DD日') }}上线</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-lg-12" style="display: inline-block">
                    <div class="col-lg-12 text-center" v-show="hasData">
                        <button class="item-article-more" @click="paginate">加载更多 >> </button>
                    </div>
                    <div class="col-lg-12 text-center" v-show="loading"><i class="fa fa-spinner fa-pulse"></i></div>
                    <div class="col-lg-12 text-center" v-show="noData" style="padding: 25px 0"><span>没有更多了</span></div>
                </div>
            </div>
            <div class="col-lg-4 main-right">
                <div class="col-lg-12 right-hot">
                    <h4>热门新闻</h4>
                    <div class="hot-head">
                        <a href="{{ route('home.new.info',['id'=>$news_hot[0]['id']]) }}"><img src="{{ $news_hot[0]['thumb'] }}" alt="">
                            <p>{{ $news_hot[0]['title'] }}</p></a>
                    </div>
                    @foreach($news_hot as $key=>$hot)
                        @if($key>0)
                            <div class="hot-item">
                                <a href="{{ route('home.new.info',['id'=>$hot['id']]) }}"><img src="{{ $hot['thumb'] }}" alt=""></a>
                                <div class="hot-item-info">
                                    <p><a href="{{ route('home.new.info',['id'=>$hot['id']]) }}">{{ $hot['title'] }}</a></p>
                                    <p>{{ $hot['created_at']->format('Y-m-d') }}</p>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

